<template>
  <div>
    <el-card>
      <el-form
        label-width="70px"
        :inline="true"
        :model="form"
        label-position="left"
      >
        <el-form-item label="企业编号">
          <el-input v-model="form.eid" />
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="创建者" style="margin-right: 500px">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option key="1" label="禁用" value="0"> </el-option>
            <el-option key="2" label="启用" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="search"
            >搜索</el-button
          >
          <el-button size="medium" @click="del">清除</el-button>
          <el-button type="primary" @click="addClick" size="medium"
            >+新增企业</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 底部卡片 -->
    <el-card>
      <!-- 表格 -->
      <el-table :data="list" v-loading="loading">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <div>
              {{ (form.page - 1) * form.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="企业编号" prop="eid" />
        <el-table-column label="企业名称" prop="name" />

        <el-table-column label="创建者" prop="username" />

        <el-table-column label="状态">
          <template v-slot="{ row }">
            <el-switch
              v-model="row.status"
              style="display: block"
              active-color="#13ce66"
              :active-value="1"
              :inactive-value="0"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              @change="change(row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button type="text" @click="statusEvent(row)">{{
                row.status == '0' ? '启用' : '禁用'
              }}</el-button>
              <el-button type="text" @click="delClick(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页栏 -->
      <div class="page">
        <el-pagination
          :current-page="form.page"
          :page-sizes="[1, 2, 5, 10, 30]"
          :page-size="form.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <Add ref="add" @getData="getData" />
  </div>
</template>

<script>
import {
  enterpriselistGet,
  enterprisestatus,
  enterpriseremove
} from '@/api/HmmmQylb'
import jsCookies from 'js-cookies'
import Add from './component/add'
export default {
  components: { Add },
  data () {
    return {
      form: {
        name: '',
        page: 1,
        limit: +jsCookies.getItem('setQYLB') || 1,
        eid: '',
        username: '',
        status: ''
      },
      list: [],
      total: 50,
      loading: true
    }
  },
  created () {
    this.getData()
  },
  methods: {
    handleSizeChange (val) {
      this.form.limit = val
      jsCookies.setItem('setQYLB', val)
      this.getData()
    },
    handleCurrentChange (val) {
      this.form.page = val
      this.getData()
    },
    // 获取企业列表信息
    async getData () {
      const res = await enterpriselistGet(this.form)
      console.log('res2222:', res)
      this.list = res.data.items
      this.total = res.data.pagination.total
      this.loading = false
    },
    // 搜索
    async search () {
      if (this.list.length === 1) {
        this.handleCurrentChange(1)
      } else {
        this.getData()
      }
    },
    // 清除数据
    del () {
      this.form = {
        name: '',
        page: 1,
        limit: 1,
        eid: '',
        username: '',
        status: ''
      }
      this.getData()
    },
    // 点击弹出弹框
    addClick () {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 点击删除企业
    async delClick (row) {
      await this.$confirm(`你确定删除${row.name}吗`, '提示', {
        confirmButtonText: '确定删除确定',
        cancelButtonText: '点错了',
        type: 'warning'
      })
      await enterpriseremove({ id: row.id })
      this.$message.success(`删除${row.name}成功`)
      if (this.form.page > 1 && this.list.length === 1) {
        this.form.page--
      }
      this.getData()
    },
    // 点击编辑
    edit (row) {
      this.$refs.add.mode = 'edit'
      this.$refs.add.isShow = true
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 点击禁用启用
    async statusEvent (row) {
      await enterprisestatus({ id: row.id })
      this.$message.success('状态更改成功')
      this.getData()
    },
    async change (row) {
      await enterprisestatus({ id: row.id })
      this.$message.success('状态更改成功')
      this.getData()
    }
  }
}
</script>

<style>
.page {
  text-align: center;
}
</style>
